<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            height:100px;
        }
        .main{
            display: flex;
        }
        .left{
            width: 260px;
            height:500px;
            background-color: #03A9F4;
        }
        .right{
            width: 100%;
            height:500px;
            background-color: #f6574a;
        }
    </style>
</head>
<body>
<h1>发布订阅模式练习demo</h1>

<div class="header">我是顶部</div>

<div class="main">
    <div class="left">
        <ul>
            <li>首页</li>
            <li>用户管理</li>
            <li>财产管理</li>
            <li>知识分享</li>
            <li>美女管理</li>
        </ul>
    </div>
    <div class="right">我是content</div>
</div>

<script>
    /*
    * publish 发布
    * subscribe 订阅
    * */

    // 中央调度中心
    let sub = {
        message:{},
        // 发布
        publish(type,data){
            if(!this.message[type]) return
            this.message[type].forEach((item)=>{
                item(data)
            })
        },
        // 订阅
        subscribe(type,cb){
            if(!this.message[type]){
                this.message[type] = [cb]
            }else{
                this.message[type].push(cb)
            }
        },
        // 删除
        unSubscribe(type,cb){
            if(!this.message[type]) return
            // 如果不传 回调的参数 就取消所有的
            if(!cb){
                this.message[type] = []
            }else{
                this.message[type].filter((item=>{
                    return item != cb
                }))
            }
        }
    }
     // 添加订阅者
    sub.subscribe('a',function(data){
        document.querySelector('.right').innerHTML = data
    })
    // 再添加订阅者header
    sub.subscribe('a',function(data){
        document.querySelector('.header').innerHTML = data
    })
    // 侧边栏点击事件
    let aside = document.querySelectorAll('.left li')
    for(let i=0; i<aside.length;i++){
        aside[i].onclick = function(){
            sub.publish('a',this.innerHTML)
        }
    }
</script>

</body>
</html>
